<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wire safety hazards</title>
	
    <link rel="stylesheet" href="styles/style.css">
    <script src="ni.js" defer></script>
</head>
<body>
    <header>
        <div class="logo">Wire safety</div>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="line.html">Wire safety hazards</a></li>
				<li><a href="yang.html">Guide to Picking Wires</a></li>
                <li><a href="deng.html">After-sales</a></li>
				<li><a href="#contact"></a></li>
            </ul>
        </nav>
    </header>

    <div class="banner">
        
    </div>

    <main>
        <section id="introduction">
            <h2>Wire safety hazards</h2>
            <p>If you notice any abnormalities in the wires, sockets or electrical appliances, such as heat, smoke or strange noises, you should stop using them immediately and notify the relevant maintenance personnel for inspection and repair</p>
        </section>

        <section id="gallery">
            <h2>Pictures of wires</h2>
            <!-- 图片混排模块，使用伪元素实现hover效果 -->
			
            <div class="gallery">
                <div class="image-container">
                    <img src="images/9039775558_94999019.jpg" alt="广州塔图片1">
                    <div class="caption">A bunch of cables</div>
                </div>
                <div class="image-container">
                    <img src="images/O1CN01UsyCf920HROZYOdCx_!!6000000006824-0-cib.jpg" alt="广州塔图片2">
                    <div class="caption">The internal structure of the wire</div>
                </div>
                <div class="image-container">
                    <img src="images/R-C.jpg" alt="广州塔图片3">
                    <div class="caption">The internal structure of the wire</div>
                </div>
                <div class="image-container">
                    <img src="images/R2-C.jpg" alt="广州塔图片4">
                    <div class="caption">The internal structure of the wire</div>
                </div>
            </div>
        </section>

        <section id="contact">
            <h2>Contact us</h2>
            <form action="#" method="post">
                <!-- 使用HTML5表单属性 -->
                <input type="text" name="name" placeholder="Name" required>
                <input type="email" name="email" placeholder="mailbox" required>
                <textarea name="message" placeholder="message" required></textarea>
                <button type="submit">submit</button>
            </form>
        </section>
    </main>
	

    <footer>
        <p> &copy; 2024 1800_2024_DG3-10</p>
    </footer>
</body>
</html>